<template>
  <div>
    <el-card style="width: 98%; height: 90vh" shadow="always">
      <div
        class="category-top"
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          line-height: 60px;
          border-bottom: 2px solid rgb(244, 245, 250);
        "
      >
        <h3>店铺管理</h3>
        <el-button v-show="!isEdit" type="primary" @click="isEdit = true">编辑</el-button>
        <el-button v-show="isEdit" type="primary" @click="isConfirm">确定</el-button>
      </div>
      <!-- -------------------------------------------------- -->
      <el-form :model="form" label-width="auto" style="max-width: 100%">
        <!-- 名称 -->
        <el-form-item label="店铺名称">
          <el-input :disabled="!isEdit" v-model="form.name" />
        </el-form-item>
        <!-- 描述 -->
        <el-form-item label="店铺公告">
          <el-input :disabled="!isEdit" v-model="form.bulletin" type="textarea" />
        </el-form-item>
        <el-form-item label="店铺头像">
          <img
            style="width: 100px; height: 100px"
            :src="`http://127.0.0.1:5000/upload/shop/${form.avatar}`"
            alt=""
          />
        </el-form-item>
        <el-form-item label="店铺图片">
          <el-upload
            v-model:file-list="fileList"
            action="http://127.0.0.1:5000/shop/upload"
            method="post"
            :on-success="handleSuccess"
            :auto-upload="true"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item>
        <!-- 配送费 -->
        <el-form-item label="配送费">
          <el-input :disabled="!isEdit" v-model="form.deliveryPrice" />
        </el-form-item>
        <!-- 配送时间 -->
        <el-form-item label="配送时间">
          <el-input :disabled="!isEdit" v-model="form.deliveryTime" />
        </el-form-item>
        <!-- 商家描述 -->
        <el-form-item label="商家描述">
          <el-input :disabled="!isEdit" v-model="form.description" />
        </el-form-item>
        <!-- 店铺评分 -->
        <el-form-item label="店铺评分">
          <el-input :disabled="!isEdit" v-model="form.score" />
        </el-form-item>
        <!-- 销量 -->
        <el-form-item label="销量">
          <el-input :disabled="!isEdit" v-model="form.sellCount" />
        </el-form-item>
        <!-- 活动 -->
        <el-form-item label="活动">
          <el-checkbox-group :disabled="!isEdit" v-model="form.supports">
            <el-checkbox value="在线支付满28减5" name="type">在线支付满28减5</el-checkbox>
            <el-checkbox value="VC无限橙果汁全场8折" name="type"> VC无限橙果汁全场8折 </el-checkbox>
            <el-checkbox value="单人精彩套餐" name="type">单人精彩套餐</el-checkbox>
            <el-checkbox value="特价饮品8折抢购" name="type">特价饮品8折抢购</el-checkbox>
            <el-checkbox value="单人特色套餐" name="type">单人特色套餐</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <!-- 时间 -->
      <el-form-item label="营业时间" style="max-width: 600px">
        <el-col :span="11">
          <el-time-picker
            :disabled="!isEdit"
            v-model="form.date"
            is-range
            range-separator="To"
            start-placeholder="Start time"
            end-placeholder="End time"
          />
        </el-col>
      </el-form-item>

      <!-- --------------------------------------------------------- -->
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { fetchShopInfo, fetchShopEdit } from '../api/shop/index'
const isEdit = ref(false)

const form = ref({
  name: '老乡鸡(光谷软件园店)',
  bulletin:
    '尊敬的客官，六一攻略：①6月1日当天在评价区分享童年趣事赠6元无门槛红包②下单时在订单备注处填写【六一儿童节快乐】随机赠送“回忆杀爆款玩具”，数量有限，送完即止。提前预祝大小宝宝节日开心。',
  avatar: 'logo.png',
  pics: ['1590480883773.webp', '1590480886706.webp', '1590480889717.webp', '1590482092433.webp'],
  deliveryPrice: 4,
  deliveryTime: 38,
  description: '蜂鸟专送',
  score: 4.5,
  sellCount: 100,
  supports: ['单人精彩套餐', 'VC无限橙果汁全场8折'],
  date: ['1970-01-01 08:00:00', '1970-01-01 22:30:00'],
})
watch(form, () => {})
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'

const fileList = ref([
  // {
  //   name: 'food.jpeg',
  //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  // },
  // {
  //   name: 'food.jpeg',
  //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  // },
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const isConfirm = async () => {
  const data = {
    ...form.value,
    id: 1,
    date: JSON.stringify(form.value.date), // 只有当后端需要字符串时才这样做
    supports: JSON.stringify(form.value.supports),
    pics: JSON.stringify(form.value.pics),
  }
  console.log('🚀 ~ isConfirm ~ data:', data)
  const res = await fetchShopEdit(data)
  console.log(res)

  isEdit.value = false
}

const handleSuccess = (response, file, fileList) => {
  console.log(fileList)

  form.value.pics.push(response.imgUrl)
}

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  form.value.pics = uploadFiles.map((ele) => ele.url.slice(34))
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}

onMounted(async () => {
  const res = await fetchShopInfo()
  form.value = res.data.data
  fileList.value = res.data.data.pics.map((ele) => ({
    name: '11', // 假设 ele 是文件名
    url: `http://127.0.0.1:5000/upload/shop/${ele}`, // 构建完整的 URL
  }))
})
</script>

<style scoped></style>
